<template>
    <div class="talkLove">
        <button @click="GetTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkLoveStore.listTalk" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="TalkLove">
import axios from 'axios';
import { reactive } from 'vue';
import {nanoid} from 'nanoid'
import { useTalkLoveStore } from '@/store/TalkLove';

let talkLoveStore= useTalkLoveStore();

//$subscribe 相当于Wathch ,mutate变更的对象，state变更的数据
talkLoveStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkLoveStore.listTalk))
})

async function GetTalk(){
// 发请求，下面这行的写法是：连续解构赋值+重命名
     let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
     // 把请求回来的字符串，包装成一个对象
     let obj = {id:nanoid(),title}
     talkLoveStore.listTalk.unshift(obj)
}

</script>

<style scoped>
.talkLove{
    background-color: olivedrab;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
 }
 select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>